<template>
  <van-popup class="student-select" v-model="$store.state.dias.studentSelect.show" position="right" :overlay="true">
    <div class="pr box">
      <div>
        <p class="level_1"><span>全体学生</span><van-checkbox class="check" v-model="selectAll" shape="box" checked-color="#00998d" @change="setSelectAll"></van-checkbox></p>
        <ul class="level_2_box">
          <li v-for="(item, index) in listData" :key="index">
            <p>
              <span @click.stop.prevent="hideShow(item)">{{item.class}}</span>
              <van-checkbox class="check fr" v-model="item.selected" shape="box" checked-color="#00998d" @change="changeSelect(item)"></van-checkbox>
            </p>
            <ul class="level_3_box" v-show="item.childShow">
              <li v-for="(stu, index) in item.list" :key="index">
                <van-checkbox class="check" v-model="stu.selected" shape="box" checked-color="#00998d" @change="changeSelect2(item,stu)">{{stu.name}}</van-checkbox>
              </li>
            </ul>
          </li>
          
        </ul>
      </div>
      <van-button type="primary" @click="save" class="bc-green btn-sure pa">确定</van-button>
    </div>
  </van-popup>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      listData:[],
      selectAll:true,
    };
  },
  methods: {
    save(){
      var numbers=[]
      this.listData.forEach(ele0=>{
        ele0.list.forEach(ele1=>{
          if(ele1.selected)numbers.push(ele1.number)
        })
      })
      this.$store.state.dias.studentSelect.selectedNumber=[...new Set(numbers)]
      this.$store.state.dias.studentSelect.show=false
    },

    getListData(){
      _g.apiPost("message/instructorStudent",{}).then(res=>{
        res.forEach(ele => {
          ele.selected=true
          ele.childShow=false
          ele.list.forEach(ele1=>{
            ele1.selected=true
          })
        });
        this.listData=res
      })
    },
    hideShow(item){
      item.childShow=!item.childShow
    },

    setSelectAll(){
      this.listData.forEach(ele0=>{
        ele0.selected=this.selectAll
        ele0.list.forEach(ele1=>{
          ele1.selected=this.selectAll
        })
      })
    },
    changeSelect(item){
      item.list.forEach(ele=>{
        ele.selected=item.selected
      })
    },
    changeSelect2(item,stu){
      
    }
  },
  created() {
    setTimeout(()=>{
      this.getListData()
    },600)
  },
};
</script>
<style lang="scss" scoped>
.student-select {
  width: 100%;
  padding: 0 20px;
  font-size: 15px;
  box-sizing: border-box;

  .box{
    height: 100%;

    >div{
      height: calc(100% - 130px);
      overflow: auto;
    }
  }
  .btn-sure{
    width: 100%;
    bottom: 10px;
  }
  .level_1{
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
  }
  .check{
    margin-left: auto;
  }
  p{
    height: 90px;
    line-height: 90px
  }
  .level_2_box{
    
    >li{
      padding-left: 20px;
      position: relative;

      p{
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
      }
    }
    >li:before{
      position: absolute;
      content: "";
      padding: 10px;
      border-radius: 50%;
      top: 15px;
      left: 5px;
      background-color: #00998d;
    }
  }

  .level_3_box{
    
    >li{
      height: 90px;
      line-height: 90px;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>